<script lang="ts" setup>
import { h, onMounted, reactive, ref } from 'vue';

import {
  Button,
  Card,
  Checkbox,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Space,
  Spin,
  Table,
  Tag,
  Dropdown,
  Menu,
} from 'ant-design-vue';

import {
  addResourceToCategory,
  createResourceCategory,
  deleteResourceCategory,
  getAvailableResources,
  getCategoryResources,
  getResourceCategories,
  removeResourceFromCategory,
  updateResourceCategory,
} from '#/api/resource-center';

import CategoryUsageGuide from '../guides/CategoryUsageGuide.vue';

const loading = ref(false);
const categoryList = ref<any[]>([]);
const total = ref(0);
const selectedRowKeys = ref<string[]>([]);
const selectedRows = ref<any[]>([]);

const searchForm = reactive({
  keyword: '',
  categoryType: '',
  status: '',
});

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber',
    width: 120,
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '分类编码',
    dataIndex: 'code',
    key: 'code',
    width: 120,
  },
  {
    title: '分类类型',
    dataIndex: 'categoryType',
    key: 'categoryType',
    width: 120,
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    width: 200,
  },
  {
    title: '资源数量',
    dataIndex: 'resourceCount',
    key: 'resourceCount',
    width: 100,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    key: 'sort',
    width: 80,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
  },
  {
    title: '操作',
    key: 'action',
    width: 280,
    fixed: 'right' as const,
  },
];

// 表单相关
const formVisible = ref(false);
const formTitle = ref('新增分类');
const formRef = ref();
const formData = reactive({
  id: '',
  name: '',
  code: '',
  categoryType: '',
  status: 'ACTIVE',
  description: '',
  sort: 0,
});

const formRules = {
  name: [{ required: true, message: '请输入分类名称' }],
  code: [{ required: true, message: '请输入分类编码' }],
  categoryType: [{ required: true, message: '请选择分类类型' }],
  status: [{ required: true, message: '请选择状态' }],
};

// 加载数据
const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchForm.keyword,
      categoryType: searchForm.categoryType,
      status: searchForm.status,
    };

    const response = await getResourceCategories(params);
    categoryList.value = response.data?.items || response.items || [];
    total.value = response.data?.total || response.total || 0;
    pagination.total = total.value;
  } catch (error) {
    console.warn('加载分类数据失败:', error);
    message.error('加载数据失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  loadData();
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    keyword: '',
    categoryType: '',
    status: '',
  });
  handleSearch();
};

// 表格变化
const handleTableChange = (pag: any) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  loadData();
};

// 打开分类表单
const openCategoryForm = (type: 'create' | 'edit', record?: any) => {
  formTitle.value = type === 'create' ? '新增分类' : '编辑分类';
  formVisible.value = true;

  if (type === 'edit' && record) {
    Object.assign(formData, record);
  } else {
    Object.assign(formData, {
      id: '',
      name: '',
      code: '',
      categoryType: '',
      status: 'ACTIVE',
      description: '',
      sort: 0,
    });
  }
};

// 提交表单
const handleFormSubmit = async () => {
  try {
    await formRef.value.validate();

    if (formData.id) {
      // 更新分类
      await updateResourceCategory(formData.id, formData);
      message.success('更新成功');
    } else {
      // 创建分类
      await createResourceCategory(formData);
      message.success('创建成功');
    }

    formVisible.value = false;
    loadData();
  } catch (error) {
    console.warn('操作失败:', error);
    message.error('操作失败');
  }
};

// 取消表单
const handleFormCancel = () => {
  formVisible.value = false;
  formRef.value?.resetFields();
};

// 查看分类
const viewCategory = (record: any) => {
  Modal.info({
    title: `分类详情 - ${record.name}`,
    width: 600,
    content: h('div', { class: 'category-detail' }, [
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '分类名称：'),
        h('span', { class: 'value' }, record.name),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '分类编码：'),
        h('span', { class: 'value' }, record.code),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '分类类型：'),
        h('span', { class: 'value' }, getCategoryTypeText(record.categoryType)),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '描述：'),
        h('span', { class: 'value' }, record.description || '暂无描述'),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '资源数量：'),
        h('span', { class: 'value' }, record.resourceCount || 0),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '排序：'),
        h('span', { class: 'value' }, record.sort || 0),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '状态：'),
        h('span', { class: 'value' }, getStatusText(record.status)),
      ]),
      h('div', { class: 'detail-item' }, [
        h('span', { class: 'label' }, '创建时间：'),
        h('span', { class: 'value' }, record.createTime),
      ]),
    ]),
  });
};

// 删除分类
const deleteCategory = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除分类"${record.name}"吗？此操作不可恢复！`,
    onOk: async () => {
      try {
        await deleteResourceCategory(record.id);
        message.success('删除成功');
        loadData();
      } catch (error) {
        console.warn('删除失败:', error);
        message.error('删除失败');
      }
    },
  });
};

// 选择变化
const onSelectionChange = (keys: any[], rows: any[]) => {
  selectedRowKeys.value = keys as string[];
  selectedRows.value = rows;
};

// 批量删除
const batchDelete = () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择要删除的分类');
    return;
  }

  Modal.confirm({
    title: '确认批量删除',
    content: `确定要删除选中的 ${selectedRowKeys.value.length} 个分类吗？此操作不可恢复！`,
    onOk: async () => {
      try {
        // 模拟批量删除
        await Promise.all(
          selectedRowKeys.value.map((id) => deleteResourceCategory(id)),
        );
        message.success('批量删除成功');
        selectedRowKeys.value = [];
        selectedRows.value = [];
        loadData();
      } catch (error) {
        console.warn('批量删除失败:', error);
        message.error('批量删除失败');
      }
    },
  });
};

// 导出分类
const exportCategories = () => {
  message.success('分类数据导出成功');
};

// 显示分类帮助
const showCategoryHelp = () => {
  Modal.info({
    title: '📁 资源分类使用指南',
    width: 800,
    content: h('div', [
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '🎯 分类的作用'),
        h('p', '资源分类是对资源进行系统化组织和管理的基础，通过分类可以：'),
        h('ul', [
          h('li', '对资源进行逻辑分组和归类'),
          h('li', '便于资源的查找和管理'),
          h('li', '支持资源的权限控制和访问管理'),
          h('li', '为资源模板和调度规则提供基础'),
        ]),
      ]),
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '🔄 与其他模块的关联'),
        h('p', '分类可以与其他模块配合使用：'),
        h('ul', [
          h('li', '在资源模板管理中，分类可以关联到特定模板'),
          h('li', '在调度规则管理中，分类可以应用特定的调度规则'),
          h('li', '在权限管理中，不同分类可以设置不同的访问权限'),
        ]),
      ]),
      h('div', { style: 'margin-bottom: 20px;' }, [
        h('h4', '💡 最佳实践'),
        h('ul', [
          h('li', '按业务场景创建分类（如：客房资源、温泉资源、餐饮资源等）'),
          h('li', '使用"管理资源"功能为分类分配具体的资源'),
          h('li', '合理设置分类的排序，便于资源的管理和查找'),
          h('li', '分类名称使用业务场景描述，编码使用英文大写字母'),
        ]),
      ]),
      h('div', [
        h('h4', '🚀 快速开始'),
        h('ol', [
          h('li', '点击"创建分类"按钮创建分类'),
          h('li', '配置分类类型和属性'),
          h('li', '使用"管理资源"功能分配资源'),
          h('li', '在模板管理中关联到该分类'),
        ]),
      ]),
    ]),
  });
};

// 显示分类示例
const showCategoryExamples = () => {
  categoryGuideVisible.value = true;
};

// 资源管理相关
const resourceManagerVisible = ref(false);
const currentCategory = ref<any>(null);
const categoryResources = ref<any[]>([]);
const availableResources = ref<any[]>([]);
const selectedResources = ref<string[]>([]);
const resourceLoading = ref(false);

// 帮助指南相关
const categoryGuideVisible = ref(false);

// 打开资源管理器
const manageResources = async (record: any) => {
  currentCategory.value = record;
  resourceManagerVisible.value = true;
  selectedResources.value = [];
  await loadCategoryResources(record.id);
  await loadAvailableResources();
};

// 加载分类资源
const loadCategoryResources = async (categoryId: string) => {
  resourceLoading.value = true;
  try {
    const response = await getCategoryResources(categoryId);
    categoryResources.value = response.data?.items || response.items || [];
  } catch (error) {
    console.error('加载分类资源失败:', error);
    message.error('加载分类资源失败');
  } finally {
    resourceLoading.value = false;
  }
};

// 加载可用资源
const loadAvailableResources = async () => {
  try {
    const response = await getAvailableResources();
    availableResources.value = response.data?.items || response.items || [];
  } catch (error) {
    console.error('加载可用资源失败:', error);
    message.error('加载可用资源失败');
  }
};

// 添加资源到分类
const addResourcesToCategory = async () => {
  if (selectedResources.value.length === 0) {
    message.warning('请选择要添加的资源');
    return;
  }

  try {
    await addResourceToCategory(
      currentCategory.value.id,
      selectedResources.value,
    );
    message.success('添加资源成功');
    selectedResources.value = [];
    await loadCategoryResources(currentCategory.value.id);
    await loadAvailableResources();
  } catch (error) {
    console.error('添加资源失败:', error);
    message.error('添加资源失败');
  }
};

// 从分类移除资源
const removeResourcesFromCategory = async (resourceIds: string[]) => {
  try {
    await removeResourceFromCategory(currentCategory.value.id, resourceIds);
    message.success('移除资源成功');
    await loadCategoryResources(currentCategory.value.id);
    await loadAvailableResources();
  } catch (error) {
    console.error('移除资源失败:', error);
    message.error('移除资源失败');
  }
};

// 工具函数
const getCategoryTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    BUSINESS: 'blue',
    TECHNICAL: 'green',
    PHYSICAL: 'orange',
  };
  return colors[type] || 'default';
};

const getCategoryTypeText = (type: string) => {
  const texts: Record<string, string> = {
    BUSINESS: '业务分类',
    TECHNICAL: '技术分类',
    PHYSICAL: '物理分类',
  };
  return texts[type] || type;
};

const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    ACTIVE: 'green',
    INACTIVE: 'red',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    ACTIVE: '激活',
    INACTIVE: '非激活',
  };
  return texts[status] || status;
};

// 获取分类图标
const getCategoryIcon = (type: string) => {
  const icons: Record<string, string> = {
    BUSINESS: 'mdi:briefcase',
    TECHNICAL: 'mdi:cog',
    PHYSICAL: 'mdi:package-variant',
  };
  return icons[type] || 'mdi:folder';
};

// 新增子分类
const addSubCategory = (parentRecord: any) => {
  formTitle.value = '新增子分类';
  formVisible.value = true;

  // 设置父级信息
  formData.parentId = parentRecord.id;
  formData.level = parentRecord.level + 1;
  formData.serialNumber = generateSerialNumber(parentRecord);

  // 重置其他字段
  Object.assign(formData, {
    id: '',
    name: '',
    code: '',
    categoryType: parentRecord.categoryType, // 继承父级类型
    status: 'ACTIVE',
    description: '',
    sort: 0,
    parentId: '',
    level: 1,
    serialNumber: '',
  });
};

// 生成序号
const generateSerialNumber = (parentRecord: any) => {
  const parentSerial = parentRecord.serialNumber;
  const children = parentRecord.children || [];
  const nextNumber = children.length + 1;
  return `${parentSerial}.${nextNumber}`;
};

// 复制分类
const copyCategory = (record: any) => {
  formTitle.value = '复制分类';
  formVisible.value = true;

  // 复制原记录数据，但清空ID和序号
  Object.assign(formData, {
    ...record,
    id: '',
    name: `${record.name}_副本`,
    code: `${record.code}_COPY`,
    serialNumber: generateSerialNumber(record),
  });
};

// 导出分类
const exportCategory = (record: any) => {
  message.info(`导出分类: ${record.name}`);
  // TODO: 实现导出功能
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="resource-categories">
    <Page title="资源分类" subtitle="配置和管理资源分类">
      <!-- 快速提示卡片 -->
      <Card :bordered="false" style="margin-bottom: 16px">
        <div class="quick-tips">
          <div class="tips-header">
            <IconifyIcon icon="mdi:folder-multiple" class="tips-icon" />
            <span class="tips-title">📁 快速提示</span>
            <Button type="link" size="small" @click="showCategoryHelp">
              查看详细指南
            </Button>
          </div>
          <div class="tips-content">
            <div class="tip-brief">
              <strong>资源分类</strong
              >是对资源进行系统化组织和管理的基础，支持逻辑分组、权限控制和模板关联。
              通过分类可以更好地管理和查找资源。
            </div>
            <div class="tip-actions">
              <Button
                type="primary"
                size="small"
                @click="openCategoryForm('create')"
              >
                <IconifyIcon icon="mdi:plus" />
                创建分类
              </Button>
              <Button size="small" @click="showCategoryExamples">
                <IconifyIcon icon="mdi:eye" />
                查看示例
              </Button>
            </div>
          </div>
        </div>
      </Card>

      <!-- 搜索区域 -->
      <Card title="搜索条件" :bordered="false" style="margin-bottom: 16px">
        <Row :gutter="16">
          <Col :span="8">
            <Form.Item label="关键词">
              <Input
                v-model="searchForm.keyword"
                placeholder="搜索分类名称、编码"
                allow-clear
              />
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="分类类型">
              <Select
                v-model="searchForm.categoryType"
                placeholder="请选择分类类型"
                allow-clear
              >
                <SelectOption value="BUSINESS">业务分类</SelectOption>
                <SelectOption value="TECHNICAL">技术分类</SelectOption>
                <SelectOption value="PHYSICAL">物理分类</SelectOption>
              </Select>
            </Form.Item>
          </Col>
          <Col :span="6">
            <Form.Item label="状态">
              <Select
                v-model="searchForm.status"
                placeholder="请选择状态"
                allow-clear
              >
                <SelectOption value="ACTIVE">激活</SelectOption>
                <SelectOption value="INACTIVE">非激活</SelectOption>
              </Select>
            </Form.Item>
          </Col>
          <Col :span="4">
            <Form.Item label="操作">
              <Space>
                <Button type="primary" @click="handleSearch">
                  <IconifyIcon icon="mdi:magnify" />
                  搜索
                </Button>
                <Button @click="handleReset">
                  <IconifyIcon icon="mdi:refresh" />
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Card>

      <!-- 数据表格 -->
      <Card title="分类列表" :bordered="false">
        <div class="table-toolbar">
          <Space>
            <Button type="primary" @click="openCategoryForm('create')">
              <IconifyIcon icon="mdi:plus" />
              新增分类
            </Button>
            <Button
              :disabled="selectedRowKeys.length === 0"
              @click="batchDelete"
            >
              <IconifyIcon icon="mdi:delete" />
              批量删除
            </Button>
            <Button @click="exportCategories">
              <IconifyIcon icon="mdi:download" />
              导出
            </Button>
            <Button @click="showCategoryHelp">
              <IconifyIcon icon="mdi:help-circle" />
              使用帮助
            </Button>
          </Space>
        </div>

        <div class="categories-content">
          <Table
            :columns="columns"
            :data-source="categoryList"
            :loading="loading"
            :pagination="pagination"
            :row-selection="{
              selectedRowKeys,
              onChange: onSelectionChange,
            }"
            row-key="id"
            :expandable="{
              defaultExpandAllRows: true,
              expandRowByClick: true,
            }"
            @change="handleTableChange"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'serialNumber'">
                <span class="serial-number">{{ record.serialNumber }}</span>
              </template>
              <template v-else-if="column.key === 'name'">
                <div class="category-name">
                  <IconifyIcon
                    :icon="getCategoryIcon(record.categoryType)"
                    class="category-icon"
                  />
                  <span class="name-text">{{ record.name }}</span>
                </div>
              </template>
              <template v-else-if="column.key === 'categoryType'">
                <Tag :color="getCategoryTypeColor(record.categoryType)">
                  {{ getCategoryTypeText(record.categoryType) }}
                </Tag>
              </template>
              <template v-else-if="column.key === 'status'">
                <Tag :color="getStatusColor(record.status)">
                  {{ getStatusText(record.status) }}
                </Tag>
              </template>
              <template v-else-if="column.key === 'resourceCount'">
                <span class="resource-count">{{ record.resourceCount }}</span>
              </template>
              <template v-else-if="column.key === 'action'">
                <div class="action-buttons">
                  <Button
                    type="link"
                    size="small"
                    @click="openCategoryForm('edit', record)"
                  >
                    编辑
                  </Button>
                  <Button
                    type="link"
                    size="small"
                    @click="addSubCategory(record)"
                  >
                    新增子项
                  </Button>
                  <Dropdown :trigger="['click']">
                    <Button type="link" size="small">
                      更多
                      <IconifyIcon icon="mdi:chevron-down" />
                    </Button>
                    <template #overlay>
                      <Menu>
                        <Menu.Item key="view" @click="viewCategory(record)">
                          <IconifyIcon icon="mdi:eye" />
                          查看
                        </Menu.Item>
                        <Menu.Item key="copy" @click="copyCategory(record)">
                          <IconifyIcon icon="mdi:content-copy" />
                          复制
                        </Menu.Item>
                        <Menu.Item
                          key="manage"
                          @click="manageResources(record)"
                        >
                          <IconifyIcon icon="mdi:cog" />
                          管理资源
                        </Menu.Item>
                        <Menu.Item key="export" @click="exportCategory(record)">
                          <IconifyIcon icon="mdi:export" />
                          导出
                        </Menu.Item>
                        <Menu.Divider />
                        <Menu.Item
                          key="delete"
                          danger
                          @click="deleteCategory(record)"
                        >
                          <IconifyIcon icon="mdi:delete" />
                          删除
                        </Menu.Item>
                      </Menu>
                    </template>
                  </Dropdown>
                </div>
              </template>
            </template>
          </Table>
        </div>
      </Card>

      <!-- 分类表单弹窗 -->
      <Modal
        v-model:open="formVisible"
        :title="formTitle"
        width="600px"
        @ok="handleFormSubmit"
        @cancel="handleFormCancel"
      >
        <Form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          layout="vertical"
        >
          <Row :gutter="16">
            <Col :span="12">
              <FormItem label="分类名称" name="name">
                <Input
                  v-model:value="formData.name"
                  placeholder="请输入分类名称"
                />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="分类编码" name="code">
                <Input
                  v-model:value="formData.code"
                  placeholder="请输入分类编码"
                />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="16">
            <Col :span="12">
              <FormItem label="分类类型" name="categoryType">
                <Select
                  v-model:value="formData.categoryType"
                  placeholder="请选择分类类型"
                >
                  <SelectOption value="BUSINESS">业务分类</SelectOption>
                  <SelectOption value="TECHNICAL">技术分类</SelectOption>
                  <SelectOption value="PHYSICAL">物理分类</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="状态" name="status">
                <Select
                  v-model:value="formData.status"
                  placeholder="请选择状态"
                >
                  <SelectOption value="ACTIVE">激活</SelectOption>
                  <SelectOption value="INACTIVE">非激活</SelectOption>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <FormItem label="描述" name="description">
            <Input.TextArea
              v-model:value="formData.description"
              :rows="3"
              placeholder="请输入分类描述"
            />
          </FormItem>
          <FormItem label="排序" name="sort">
            <InputNumber
              v-model:value="formData.sort"
              :min="0"
              style="width: 100%"
              placeholder="请输入排序值"
            />
          </FormItem>
        </Form>
      </Modal>

      <!-- 资源管理器弹窗 -->
      <Modal
        v-model:open="resourceManagerVisible"
        :title="`管理资源 - ${currentCategory?.name || ''}`"
        width="1000px"
        :footer="null"
      >
        <div class="resource-manager">
          <Row :gutter="16">
            <!-- 左侧：分类资源列表 -->
            <Col :span="12">
              <Card title="当前分类资源" :bordered="false">
                <div class="resource-list">
                  <div v-if="resourceLoading" class="loading">
                    <Spin />
                  </div>
                  <div v-else-if="categoryResources.length === 0" class="empty">
                    暂无资源
                  </div>
                  <div v-else class="resource-items">
                    <div
                      v-for="resource in categoryResources"
                      :key="resource.id"
                      class="resource-item"
                    >
                      <div class="resource-info">
                        <div class="resource-name">{{ resource.name }}</div>
                        <div class="resource-code">{{ resource.code }}</div>
                        <div class="resource-location">
                          {{ resource.location }}
                        </div>
                      </div>
                      <Button
                        type="link"
                        size="small"
                        danger
                        @click="removeResourcesFromCategory([resource.id])"
                      >
                        移除
                      </Button>
                    </div>
                  </div>
                </div>
              </Card>
            </Col>

            <!-- 右侧：可用资源列表 -->
            <Col :span="12">
              <Card title="可用资源" :bordered="false">
                <div class="resource-list">
                  <div v-if="availableResources.length === 0" class="empty">
                    暂无可用资源
                  </div>
                  <div v-else class="resource-items">
                    <div
                      v-for="resource in availableResources"
                      :key="resource.id"
                      class="resource-item"
                    >
                      <Checkbox
                        :value="resource.id"
                        v-model:checked="selectedResources"
                      />
                      <div class="resource-info">
                        <div class="resource-name">{{ resource.name }}</div>
                        <div class="resource-code">{{ resource.code }}</div>
                        <div class="resource-location">
                          {{ resource.location }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="resource-actions">
                    <Button
                      type="primary"
                      :disabled="selectedResources.length === 0"
                      @click="addResourcesToCategory"
                    >
                      添加到分类
                    </Button>
                  </div>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </Modal>

      <!-- 分类使用指南模态框 -->
      <CategoryUsageGuide v-model:visible="categoryGuideVisible" />
    </Page>
  </div>
</template>

<style scoped>
.resource-categories {
  padding: 20px;
}

/* 快速提示样式 */
.quick-tips {
  padding: 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-radius: 8px;
  border: 1px solid #bae7ff;
}

.tips-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tips-icon {
  color: #1890ff;
  font-size: 20px;
  margin-right: 8px;
}

.tips-title {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  flex: 1;
}

.tips-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip-brief {
  flex: 1;
  color: #262626;
  line-height: 1.6;
}

.tip-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* 表格工具栏样式 */
.table-toolbar {
  margin-bottom: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.categories-header {
  margin-bottom: 24px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.categories-content {
  margin-bottom: 24px;
}

.resource-count {
  color: #1890ff;
  font-weight: bold;
}

.category-detail {
  padding: 16px;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  line-height: 1.5;
}

.detail-item .label {
  width: 100px;
  color: #666;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  color: #333;
}

/* 资源管理器样式 */
.resource-manager {
  padding: 16px 0;
}

.resource-list {
  max-height: 400px;
  overflow-y: auto;
}

.loading {
  text-align: center;
  padding: 40px;
}

.empty {
  text-align: center;
  padding: 40px;
  color: #999;
}

.resource-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background: #fafafa;
}

.resource-info {
  flex: 1;
  margin-left: 8px;
}

.resource-name {
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
}

.resource-code {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 2px;
}

.resource-location {
  font-size: 12px;
  color: #8c8c8c;
}

.resource-actions {
  margin-top: 16px;
  text-align: center;
}

.serial-number {
  font-weight: 500;
  color: #1890ff;
}

.category-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-icon {
  font-size: 16px;
  color: #666;
}

.name-text {
  font-weight: 500;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-buttons .ant-btn-link {
  padding: 0 4px;
  height: auto;
  line-height: 1;
}

/* 层级缩进样式 */
.ant-table-tbody > tr > td {
  padding-left: 16px;
}
</style>
